<template>
    <div>
        <el-form
                ref="loginFormRef"
                :model="loginForm"
                :rules="userRules"
                class="demo-ruleForm"
        >
            <el-form-item prop="username">
                <el-input size="large" v-model="loginForm.username" >
                    <template #prefix>
                        <el-icon>
                            <User />
                        </el-icon>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input size="large" v-model="loginForm.password">
                    <template #prefix>
                        <el-icon>
                            <Lock />
                        </el-icon>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item>
                <div class="unKnowPassWord">
<!--                    <a href="#">忘记密码</a>-->
                </div>
            </el-form-item>
            <el-form-item>
                <el-button size="large" class="login-submit-button" type="primary" @click="submitForm(loginFormRef)">登录</el-button>
                <passwordCaptcha @callbackName="callbackName" ref="TencentCaptchaRef"></passwordCaptcha>
                <!--                <el-button @click="resetForm(loginFormRef)">Reset</el-button>-->
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import passwordCaptcha from "../../../components/TencentCaptcha/passwordCaptcha";
    import Cookies from 'js-cookie'
    import {user_login} from "../../../request/api";
    import { reactive, ref,toRefs } from 'vue'
    import {ElMessage} from "element-plus";
    import {useRouter} from "vue-router";
    import {useStore} from 'vuex';
    export default {
        name: "index",
        setup(){
            let router = useRouter();
            let store = useStore();

            let data = reactive({
                loginFormRef:null,
                TencentCaptchaRef:null,
                loginForm:{
                    username:'',
                    password:''
                }
            })

            const validateUserName = (rule,value,callback) => {
                if (value === '') {
                    callback(new Error('用户名不能为空'))
                }else {
                    callback()
                }
            }
            const validatePassWord = (rule,value,callback) => {
                if (value === '') {
                    callback(new Error('密码不能为空'))
                } else {
                    callback()
                }
            }
            const userRules = reactive({
                username: [{ validator: validateUserName, trigger: 'blur' }],
                password: [{ validator: validatePassWord, trigger: 'blur' }],
            })

            let callbackName = (captcha_obj) =>{
                let params = {
                    captcha:captcha_obj,
                    username:data.loginForm.username,
                    password:data.loginForm.password
                }
                user_login(params).then(res =>{
                    store.commit('setToken', res.token);
                    Cookies.set("token", res.token);
                    router.push('/home')
                }).catch(err =>{
                    ElMessage({
                        type:'error',
                        message:err.msg+err.errors
                    })
                })
            }

            const submitForm = (formEl) => {
                if (!formEl) return
                formEl.validate((valid) => {
                    if (valid) {
                        user_login(data.loginForm).then(res =>{
                            console.log(res);
                            store.commit('setToken', res.token);
                            Cookies.set("token", res.token);
                            router.push('/home')
                        }).catch(err =>{
                            ElMessage({
                                type:'error',
                                message:err.msg+err.errors
                            })
                            if(err.msg == '登录错误次数过多'){
                                setTimeout(() =>{
                                    data.TencentCaptchaRef.show();
                                },1000)
                            }
                        })
                    } else {
                        console.log('error submit!')
                        return false
                    }
                })
            }

            const resetForm = (formEl) => {
                if (!formEl) return
                formEl.resetFields()
            }

            document.onkeydown = function (e) {
                let key = window.event.keyCode;
                if (key == 13) {
                    submitForm(data.loginFormRef)
                }
            };
            return{
                callbackName,
                userRules,
                ...toRefs(data),
                submitForm,
                resetForm,
            }
        },
        components:{
            passwordCaptcha
        }
    }
</script>

<style scoped>
    .msg_code:hover{
        color: dodgerblue;
    }
    .login-submit-button{
        width: 100%;
        background-color: rgba(0, 84, 254, 1);
    }
    .unKnowPassWord{
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }
</style>
